<template>
  <div class="home">
    <div class="wx_info">
      <div class="text_box">
        <span class="title">即时消息</span>
        <span class="left">实时聊天</span>
        <span class="right">玩出花样</span>
      </div>
      <div class="wx_img">
<!--        需要替换更好看的图片-->
        <img src="@/assets/img/wx.png">
      </div>
    </div>
    <div class="login_btn_box">
          <button class="scan_btn" v-if="!wxToken" @click="scanLogin">扫码登录</button>
          <button class="scan_btn" v-else  @click="scanLogin">在线微信</button>
          <button class="login_btn" v-if="!wxToken" @click="goUserLogin">用户名登录</button>
    </div>

  </div>
</template>

<script setup>

import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";

let router = useRouter();

let wxToken = ref("")
function goUserLogin(){
  router.push("/userLogin")
}

function scanLogin(){
  router.push("/login")
}

onMounted(()=>{
  wxToken.value = localStorage.getItem('wx_token')
})

</script>

<style lang="less" scoped>
  .home{
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
    .wx_info{
      flex: 3;
      justify-content: space-evenly;
      align-items: center;
      padding-top: 40px;
      display: flex;
      .text_box{
        width: 180px;
        span{
          display: block;
          margin: 20px 0;
        }
        .title{
          text-align: start;
          color: #999999;
        }
        .left{
          text-align: start;
          font-size: 28px;
        }
        .right{
          text-align: end;
          font-size: 28px;
        }
      }
      .wx_img{
        width: 40%;
        img{
          width: 100%;
          border-radius: 15px;

        }
        box-shadow: #000 ;
      }
    }
    .login_btn_box{
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  button{
    margin: 20px;
    height: 45px;
    border-radius: 15px;
    letter-spacing:2px;
    outline-style: none;
    cursor: pointer;
    font-size: 20px;
    padding: 0 22px;
  }
  .scan_btn{
    border: none;
    color: #fff;
    background-color: #07c160;
  }
  .scan_btn:hover{
    background-color: #43cb82;
  }

  .login_btn{
    border: 1px solid #a1a1a1;
  }

  .login_btn:hover{
    background-color: #efefef ;
  }

</style>